<template>
  <el-menu
      router :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <el-menu-item index="/">YOJ</el-menu-item>
    <el-menu-item index="/">
      <el-icon><House/></el-icon>
      首页
    </el-menu-item>
    <el-menu-item index="/Problem">
      <el-icon><List /></el-icon>
      题库
    </el-menu-item>
    <el-menu-item index="/Competition">
      <el-icon><Medal /></el-icon>
      比赛
    </el-menu-item>
    <el-menu-item index="/Status">
      <el-icon><Loading /></el-icon>
      评测
    </el-menu-item>
    <el-menu-item index="/User">
      <el-icon><UserFilled /></el-icon>
      用户
    </el-menu-item>
    <el-sub-menu index="/" v-if="$store.state.flag"><!--管理员才能进-->
      <template #title>
        <el-icon><Setting /></el-icon>
        管理
      </template>
      <el-sub-menu index = "6-1">
        <template #title>题目管理</template>
        <el-menu-item index ='/AddProblem'>增加题目</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index = "6-2">
        <template #title>比赛管理</template>
        <el-menu-item index ='/AddCompetition'>新建比赛</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <div class="flex-grow" />
    <el-menu-item index="/Login1">
      登录
    </el-menu-item>
    <el-menu-item index="/Login2">
      注册
    </el-menu-item>
    <el-menu-item index="Logout">退出</el-menu-item>
  </el-menu>
</template>

<script>
import { useStore } from 'vuex';

export default {
  name: "Header",
  components: {

  },
  data() {
    const store = useStore();
    return {
        //flag: store.state.flag
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang="scss">

.flex-grow {
  flex-grow: 1;
}

.el-menu-demo {
  box-shadow: 10px 5px 5px darkgrey;
  height: 80px;
}

.el-menu-item {
  font-size: 20px;
}

.el-menu .el-menu-item,
.el-menu .el-sub-menu__title {
  font-size: 20px;
}

.el-sub-menu {
  font-size: 20px;
}

.example .layui-body {
  display: flex;
  background: white;
  align-items: center;
  justify-content: center;
  color: black;
}

</style>
